<template>
  <div style="width:100%;">
    <div id="chartspie" class="echart" ref="chart"></div>
  </div>
</template>

<script>

export default {
  components: {},
  props:{
    offiandtempuser:Array,
    // companylist:Array,
  },
  data() {
    return {
      
      personNameqy:'',
      personNamels:'',
      personValueqy:0,
      personValuels:0,
      
    };
  },
  methods: {
    // test(id){
    //   this.$emit("changeIds",id);
    //   //console.log(id)
    // },
    // optionsData(date){
    //   // //console.log('1111111111'+date)
    //   // for(let i=0;i<date.length;i++){
    //   //   this.options[i].value=date[i].id;
    //   //   this.options[i].label=date[i].name;
    //   // }
    //   date=date.map(item=>{
    //     return{
    //       value:item.id,
    //       label:item.name
    //     }
    //   })
    //   this.options=date
    // },
    drawLine(n) {
      this.personNameqy=n.list[0].name
      this.personNamels=n.list[1].name
      this.personValueqy=n.list[0].value
      this.personValuels=n.list[1].value
      // 基于准备好的dom，初始化echarts实例
 
          const chart = this.$refs.chart;
  
      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(chart); //推荐
      // 绘制图表
      // let options = {
      //   tooltip: {
      //     backgroundColor: "rgba(0,0,0,0.8)",
      //     borderColor: "rgba(0,0,0,0.8)",
      //     trigger: "item",
      //     textStyle: {
      //       color: "#ffffff",
      //     },
      //   },
      //   legend: {
      //     // top: "20%",
      //     bottom: "0",
      //     orient: "vertical",
      //     icon: "circle",
      //     data:['企业职工','临时人员'],
      //     textStyle: { color: "#FFFDFE",fontSize:12 },
      //   },
      //   series: [
      //     // {
      //     //   // name: '访问来源',
      //     //   type: "pie",
      //     //   center: ["60%", "40%"],
      //     //   radius: ["40%", "70%"],
      //     //   avoidLabelOverlap: false,
      //     //   label: {
      //     //     show: false,
      //     //     position: "center",
      //     //   },
      //     //   emphasis: {
      //     //     label: {
      //     //       show: false,
      //     //       fontSize: "40",
      //     //       fontWeight: "bold",
      //     //     },
      //     //   },
      //     //   labelLine: {
      //     //     show: false,
      //     //   },
      //     //   data: data.seriesData,
      //     // },
      //     {
      //       type: "pie",
      //       center: ["50%", "40%"],
      //       radius: ["40%", "60%"],

      //       data: [
      //         { value: 335, name: "企业职工", itemStyle: { color: "#fff683" } },
      //         {
      //           value: 310,
      //           name: "临时人员",
      //           itemStyle: { color: "rgb(3, 204, 246)" },
      //         },
      //       ],
      //       emphasis: {
      //         itemStyle: {
      //           shadowBlur: 10,
      //           shadowOffsetX: 0,
      //           shadowColor: "rgba(0, 0, 0,1)",
      //         },
      //       },
      //       label: {
      //         normal: {
      //           textStyle: {
      //             color: "#fff", // 改变标示文字的颜色
      //           },
      //         },
      //       },
      //     },
      //   ],
      // };
      let option = {
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "center",
          bottom: 0,
          // data: ["企业职工", "临时人员"],
          textStyle: {
            //图例文字的样式
            color: "white",
            fontSize: 16,
          },
          orient:"horizontal"
        },
        title: {
      text:'总人数\n\n'+(this.personValueqy+this.personValuels) ,  //图形标题，配置在中间对应效果图的80%
      left: "center",
      top: "center",
      textStyle: {
        color: "rgb(50,197,233)",
        fontSize: 16,
        align: "center"
      }
    },
        // grid: {
        //   // left: "5%",
        //   left: '15%',
        //   top: "15%",
        //   containLabel: true,
        //   // height: "110px",
        //   // width: "150px",
        // },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // position: "center",
            },
            label: {
              itemStyle: {
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                show: false,
                position: "outside",
              },
              emphasis: {
                show: false,
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            labelLine: {
              //引导线设置
              normal: {
                show: false, //引导线显示
              },
            },
            data: [
              { value: this.personValueqy, name: this.personNameqy, itemStyle: { color: "#fff683" } },
              {
                value: this.personValuels,
                name: this.personNamels,
                itemStyle: { color: "rgb(3, 204, 246)" },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  mounted() {
    // this.optionsData(this.companylist)
    this.drawLine(this.offiandtempuser[0]);
  },
};
</script>
<style lang="less" scoped>
.echart {
  // width: 100%;
  height: 7vw;
  margin-top: 1.1vw;
}
// .publicinput {
//   // z-index: 20;
//   position: absolute;
//   width: 100%;
//   left: 2.693vw;
//   padding-bottom: 0.5vw;
// }
</style>
